<template>
  <view class="patient-container">
    <!-- 就诊人列表 -->
    <view class="patient-list">
      <view 
        class="patient-item card"
        v-for="(patient, index) in patients"
        :key="index"
        @tap="selectPatient(patient)"
      >
        <view class="info">
          <view class="name-wrap">
            <text class="name">{{ patient.name }}</text>
            <text class="tag default" v-if="patient.isDefault">默认</text>
            <text class="tag" :class="patient.relation">{{ patient.relationText }}</text>
          </view>
          <view class="id-info">
            <text class="id-type">{{ patient.idType }}：</text>
            <text class="id-number">{{ patient.idNumber }}</text>
          </view>
          <view class="card-info" v-if="patient.cardNo">
            <text class="label">就诊卡号：</text>
            <text class="value">{{ patient.cardNo }}</text>
          </view>
        </view>
        
        <view class="actions">
          <view 
            class="action-btn"
            @tap.stop="editPatient(patient)"
          >
            <text class="iconfont icon-edit"></text>
            <text>编辑</text>
          </view>
          <view 
            class="action-btn"
            @tap.stop="deletePatient(patient)"
            v-if="!patient.isDefault"
          >
            <text class="iconfont icon-delete"></text>
            <text>删除</text>
          </view>
          <view 
            class="action-btn"
            @tap.stop="setDefault(patient)"
            v-if="!patient.isDefault"
          >
            <text class="iconfont icon-star"></text>
            <text>设为默认</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加就诊人按钮 -->
    <view class="add-btn" @tap="addPatient">
      <text class="iconfont icon-add"></text>
      <text>添加就诊人</text>
    </view>
    
    <!-- 温馨提示 -->
    <view class="notice-card">
      <view class="section-title">温馨提示</view>
      <view class="notice-list">
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">每个用户最多可添加5个就诊人</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">请确保就诊人信息真实准确，以免影响就医</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="content">身份证号码用于实名认证，请谨慎填写</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 就诊人列表数据
const patients = ref([
  {
    id: 1,
    name: '张三',
    idType: '身份证',
    idNumber: '440************123',
    cardNo: '1234567890',
    relation: 'self',
    relationText: '本人',
    isDefault: true
  },
  {
    id: 2,
    name: '张小明',
    idType: '身份证',
    idNumber: '440************456',
    cardNo: '0987654321',
    relation: 'child',
    relationText: '子女',
    isDefault: false
  }
])

// 选择就诊人
const selectPatient = (patient) => {
  // 如果是从其他页面跳转来的，返回并传值
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  if (prevPage?.$page?.path?.includes('/appointment/')) {
    uni.$emit('selectPatient', patient)
    uni.navigateBack()
  }
}

// 添加就诊人
const addPatient = () => {
  if (patients.value.length >= 5) {
    uni.showToast({
      title: '最多添加5个就诊人',
      icon: 'none'
    })
    return
  }
  
  uni.navigateTo({
    url: '/pages/patient/add'
  })
}

// 编辑就诊人
const editPatient = (patient) => {
  uni.navigateTo({
    url: `/pages/patient/edit?id=${patient.id}`
  })
}

// 删除就诊人
const deletePatient = (patient) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该就诊人吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里调用删除API
        const index = patients.value.findIndex(p => p.id === patient.id)
        if (index > -1) {
          patients.value.splice(index, 1)
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        }
      }
    }
  })
}

// 设为默认就诊人
const setDefault = (patient) => {
  // 这里调用设置默认API
  patients.value.forEach(p => {
    p.isDefault = p.id === patient.id
  })
  uni.showToast({
    title: '设置成功',
    icon: 'success'
  })
}
</script>

<style lang="scss">
.patient-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  
  .patient-list {
    .patient-item {
      margin-bottom: 20rpx;
      
      .info {
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
        
        .name-wrap {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-right: 16rpx;
          }
          
          .tag {
            font-size: 22rpx;
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
            margin-right: 12rpx;
            
            &.default {
              color: $primary-color;
              background: $primary-light;
            }
            
            &.self {
              color: $success;
              background: rgba($success, 0.1);
            }
            
            &.child {
              color: $warning;
              background: rgba($warning, 0.1);
            }
            
            &.parent {
              color: $info;
              background: rgba($info, 0.1);
            }
          }
        }
        
        .id-info {
          margin-bottom: 12rpx;
          
          .id-type {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .id-number {
            font-size: 26rpx;
            color: $text-primary;
          }
        }
        
        .card-info {
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .value {
            font-size: 26rpx;
            color: $text-primary;
          }
        }
      }
      
      .actions {
        display: flex;
        padding-top: 20rpx;
        
        .action-btn {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
          
          .iconfont {
            font-size: 32rpx;
            color: $text-regular;
            margin-right: 8rpx;
          }
          
          text {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
  
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    background: #fff;
    border-radius: $radius-lg;
    margin-bottom: 30rpx;
    
    .iconfont {
      font-size: 32rpx;
      color: $primary-color;
      margin-right: 8rpx;
    }
    
    text {
      font-size: 28rpx;
      color: $primary-color;
    }
    
    &:active {
      background: darken(#fff, 2%);
    }
  }
  
  .notice-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    
    .notice-list {
      .notice-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          width: 12rpx;
          height: 12rpx;
          background: $primary-color;
          border-radius: 50%;
          margin-top: 12rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
        
        .content {
          flex: 1;
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
}
</style> 